<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>17雪碧图示例</title>
    <style>
    
        .a1 {
            width: 100px;
            height: 100px;
            /* overflow: hidden; */
            /* 超出窗口才滚动 */
            overflow: auto;
            /* overflow: scroll; */
        }

        /* 处理雪碧图方式一：img标签 + 相对定位position left top */
        div {
            width: 80px;
            height: 80px;
            overflow: hidden;
        }

        img {
            /*必须加relative不然显示第一个区域*/
            position: relative;
            top: -1px;
            left: -1px;
        }

        div:hover img {
           left: -93px;
           top: -1px;
        }

        /* 处理雪碧图方式二：背景图 + background + position （针对 input 元素的雪碧图应用）*/
        input {
            width: 350px;
            line-height: 30px;
            border-radius: 5px;
            outline: none;
            border: 2px solid royalblue;
            /* 设置背景图 */
            background: url(./img/baidu.png) no-repeat 325px 5px;
        }

        input:hover {
            /* 设置背景图，hover 时切换背景图位置 */
            background: url(./img/baidu.png) no-repeat 325px -19px;
            /* 鼠标形状改变 */
            cursor:pointer;
            /* 也可以自己指定鼠标形状 */
            /* cursor: url(./img/finger.png), pointer; */
        }

        /* 另外截图中还有对含文本的 .d1 容器样式，未单独写 CSS 规则，这里补充基础结构示意，实际可根据需求完善 */
    </style>
</head>

<body>
   
    <!-- 处理雪碧图方式一的结构：img + 相对定位 -->
    <div>
        <img src="./img/sprite_right.png" alt="雪碧图切片">
    </div>
    <div class="a1">
        aaaaaaaaa<br>
        aaaaaaaaa<br>
        aaaaaaaaa<br>
        aaaaaaaaa
    </div>

    <!-- 处理雪碧图方式二的结构：input 结合背景图实现雪碧图切换 -->
    <input type="text" autocomplete="off">
</body>

</html>